<template>
    <div class="nine">
        <div class="nine-head">
            <img src="~assets/images/nine_head.jpg" alt="">
        </div>
        <div class="nine">
            <img class="nine-bg" src="~assets/images/nine_bg.jpg" alt="">
            <div class="nine-award">
                <div class="award" :class="{awardActive: num == 1}">
                    <img src="~assets/images/award.png" alt="">
                    <span>智能手表</span>
                </div>
                <div class="award" :class="{awardActive: num == 2}">
                    <img src="~assets/images/award.png" alt="">
                    <span>智能手表</span>
                </div>
                <div class="award" :class="{awardActive: num == 3}">
                    <img src="~assets/images/award.png" alt="">
                    <span>智能手表</span>
                </div>
                <div class="award" :class="{awardActive: num == 8}">
                    <img src="~assets/images/award.png" alt="">
                    <span>智能手表</span>
                </div>
                <div class="award" @click="startCircle">
                    <img src="~assets/images/now.png" alt="">
                    <span style="color:#fc3b14;">20积分/次</span>
                </div>
                <div class="award" :class="{awardActive: num == 4}">
                    <img src="~assets/images/award.png" alt="">
                    <span>智能手表</span>
                </div>
                <div class="award" :class="{awardActive: num == 7}">
                    <img src="~assets/images/award.png" alt="">
                    <span>智能手表</span>
                </div>
                <div class="award" :class="{awardActive: num == 6}">
                    <img src="~assets/images/award.png" alt="">
                    <span>智能手表</span>
                </div>
                <div class="award" :class="{awardActive: num == 5}">
                    <img src="~assets/images/award.png" alt="">
                    <span>智能手表</span>
                </div>
            </div>
        </div>
        <div class="rules">
             <div class="award">
                 <div class="award-recode">
                     <p>————— 我的中奖纪录 —————</p>
                     <div class="my-award">
                         <div class="list" v-for="(item,index) in personalAward" :key="index">
                             <span>{{item.name}}</span>
                             <span>{{item.status}}</span>
                         </div>
                     </div>
                     <div class="get-btn">
                         <span>全部领取</span>
                     </div>
                 </div>
                 <div class="award-detail">
                     <p>—————— 中奖名单 ——————</p>
                     <div class="detail-list">
                         <div class="list" v-for="(item,index) in allAward" :key="index">
                             <span>{{item.name}}</span>
                             <span>{{item.nickname}}</span>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="rule-des">
                 <img src="~assets/images/x2.png" alt="">
                 <div class="rule-box">
                     <p>————— 活动规则 —————</p>
                    <p>{{rules.explain}}</p>
                    <!-- <p>2. 活动规则活动规则活动规则活动规则活动规则活动规则活动规则</p>
                    <p>3. 活动规则活动规则活动规则活动规则活动规则活动规则活动规则</p> -->
                 </div>
             </div>
        </div>
        <div class="award-layer" v-show="showLayer">
            <div class="award-detail-layer">
                <img src="~assets/images/nine_award.png" alt="">
                <div class="award-content">
                    <span>恭喜您获取</span>
                    <span>{{awardContent}}</span>
                </div>
                <div class="get-award"  @click="getMyAward">
                    <span>领取</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'nine',
    data(){
        return {
            clientHeight:0,
            num:0,
            timer:null,
            rules:{},
            personalAward:[],
            allAward:[],
            temStatus:{
                0:'待领取',
                1:'已领取'
            },
            awardContent:'锤子一把',
            showLayer:true
        }
    },
    methods:{
        circle(){
            let that = this;
            this.timer = setInterval(function(){
                if(that.num == 8){
                    that.num = 1;
                }else{
                    that.num ++;
                }
            },1000)
        },
        startCircle(){
            let that = this;
            this.num = 0;
            this.timer = setInterval(function(){
                if(that.num == 8){
                    that.num = 1;
                }else{
                    that.num ++;
                }
            },100);
            setTimeout(function(){
                that.hitEgg();
            },3000); 
        },
        eggRule(){
            let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.nineRule, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.rules = res.data['msg'];
                    sessionStorage.setItem('activeId', that.rules.id);
                }
            })
        },
        hitEgg(){
            let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'post', that.$api.nineHited, {'activity_id': that.rules.id}, token, function(res){
                if(res.data['error_code'] == 0){
                    that.showLayer = true;
                    that.awardContent = res.data.msg;
                    // that.eggRule();
                }else{
                    that.toast(res.data.msg);
                }
                clearInterval(that.timer);
                that.num = 100;
            })
        },
        awardMan(){
            let that = this;
            let token = localStorage.getItem('token');
            let id = sessionStorage.getItem('activeId');
            that.$ajax(that, 'get', that.$api.nineAward + id, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.personalAward = res.data['msg'];
                    that.personalAward.forEach(item => {
                       item.status = that.temStatus[item.status]; 
                    });
                }
            })
        },
        awardAll(){
            let that = this;
            let token = localStorage.getItem('token');
            let id = sessionStorage.getItem('activeId');
            that.$ajax(that, 'get', that.$api.nineAwardAll + id, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.allAward = res.data['msg'];
                    console.log(that.allAward);
                }
            })
        },
        getMyAward(){
            this.showLayer = false;
            this.awardMan();
        }
    },
    mounted(){
        let scale = window.devicePixelRatio;
        this.clientHeight = document.documentElement.clientHeight*scale/100;
        this.$store.state.tab = '幸运大抽奖';
        // this.circle();
    },
    activated(){
        this.$store.state.tab = '幸运大抽奖';
    },
}
</script>

<style lang='less'>
@rem:100rem;

.nine{
    width: 750/@rem;
    margin-top: 88/@rem;
    padding-bottom: 30/@rem;
    background: #fa483e;
    .nine-head{
        width: 750/@rem;
        height: 296/@rem;
        img{
            width: 750/@rem;
            height: 296/@rem;
        }
    }
    .nine{
        width: 100%;
        height: 689/@rem;
        margin-top: 20/@rem;
        position: relative;
        .nine-bg{
            width: 750/@rem;
            height: 688/@rem;
        }
        .nine-award{
            width: 570/@rem;
            height: 570/@rem;
            display: flex;
            flex-wrap: wrap;
            position: absolute;
            left: 90/@rem;
            top: 59/@rem;
            .award{
                width: 180/@rem;
                height: 180/@rem;
                margin: 5/@rem 5/@rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background-image: linear-gradient(-10deg, 
                    #ffe0e0 0%, 
                    #ffefef 100%);
                border-radius: 10/@rem;
                img{
                    width: 92/@rem;
                }
                span{
                    color: #802520;
                    margin-top: 6/@rem;
                    font-weight: 600;
                }
            }
            .award:nth-of-type(5){
                background: url('~assets/images/nine_detail.jpg') no-repeat;
            }
            .awardActive{
                background: #ffe59e;
            }
        }
    }
    .rules{
        width: 642/@rem;
        height: 683/@rem;
        background-color: #f75f57;
        box-shadow: 0px 3/@rem 3/@rem 0px 
            rgba(230, 33, 23, 0.33);
        border-radius: 10/@rem;
        margin: 0 auto;
        position: relative;
        margin-top: 150/@rem;
        .award{
            width: 600/@rem;
            height: 822/@rem;
            background: #ffefef;
            position: absolute;
            left: 21/@rem;
            bottom: 0;
            color: #e9433a;
            overflow: hidden;
            .award-recode{
                margin-top: 30/@rem;
                .my-award{
                    width: 100%;
                    box-sizing: border-box;
                    padding: 0 20/@rem;
                    margin-top: 20/@rem;
                    .list{
                        display: flex;
                        justify-content: space-between;
                    }
                    
                }
                .get-btn{
                    width: 200/@rem;
                    height: 60/@rem;
                    margin: 0 auto;
                    margin-top: 20/@rem;
                    background-color: #fdd113;
                    border-radius: 10/@rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    span{
                        color: #ffffff;
                    }
                }
                .get-btn:active{
                    background: #eac111;
                }
            }
            .award-detail{
                margin-top: 40/@rem;
                .detail-list{
                    width: 100%;
                    box-sizing: border-box;
                    padding: 0 20/@rem;
                    margin-top: 20/@rem;
                    .list{
                        display: flex;
                        justify-content: space-between;
                        margin-top: 6/@rem;
                    }
                }
            }
        }
        .rule-des{
            width: 642/@rem;
            height: 416/@rem;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 999;
            img{
                width: 642/@rem;
                height: 416/@rem;;
            }
            .rule-box{
                width: 642/@rem;
                height: 380/@rem;
                box-sizing: border-box;
                padding: 0 40/@rem;
                position: absolute;
                left: 0;
                bottom: 0;
                p{
                    font-size: 24/@rem;
                    color: #fdd113;
                }
                p:nth-of-type(2),p:nth-of-type(3),p:nth-of-type(4){
                    text-align: start;
                    margin-top: 30/@rem;
                }
            }
        }
    }
    .award-layer{
        height: 100%;
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 99999;
    }
    .award-detail-layer{
        width: 600/@rem;
        height: 720/@rem;
        border-radius: 20/@rem;
        background: #ffffff;
        overflow: hidden;
        img{
            width: 600/@rem;
        }
        .award-content{
            margin-top: 20/@rem;
            span:nth-of-type(1){
                font-size: 26/@rem;
            }
            span:nth-of-type(2){
                font-size: 32/@rem;
                font-weight: 600;
            }
        }
        .get-award{
            width: 200/@rem;
            height: 80/@rem;
            background: #d03a09;
            border-radius: 12/@rem;
            margin: 0 auto;
            color: #ffffff;
            margin-top: 40/@rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30/@rem;
        }
        .get-award:active{
            background: #a62c01;
        }
    }
}
</style>
